<template>
    <div>
        <el-dialog v-model="props.isShow" :title="props.isAdd ? '添加轮播图' : '编辑轮播图'" center :before-close="closeX"
            @open="open(formRef)" >
            <el-form :model="form" label-width="100px" ref="formRef" :rules="rules">
                <el-form-item label="轮播图标题" prop="title">
                    <el-input v-model="form.title" />
                </el-form-item>


                <el-form-item label="图片">
                    <el-upload class="avatar-uploader" action="#" :file-list="photo" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-change="changeInfo"
                        :limit="1">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>

                <el-form-item label="状态">
                    <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
                </el-form-item>

            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="close()">取消</el-button>
                    <el-button type="primary" @click="submit(formRef)">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, defineProps,reactive,defineExpose} from "vue";
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, FormRules, FormInstance } from 'element-plus'
import { useStore } from 'vuex';
import { banneradd, banneredit, bannerinfo } from '@/request/api';
let formRef = ref<FormInstance>()
let store = useStore()
let emit = defineEmits(["close"])
let props = defineProps({
    isAdd: Boolean,
    isShow: Boolean
})

// 关闭
let close = () => {
    emit("close")
}

const closeX = (done: any) => {
    done()
    close()
}

let open = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    form.value = {
        title: "",//轮播图名称
        img: "",//图片(文件)
        status: "",//状态  1正常2禁用
        id:0
    }
    formEl.resetFields();
    imageUrl.value = ''
}
let submit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((val)=>{
        if(val){
            if(props.isAdd){
                banneradd(form.value).then((res: any) => {
                    if (res.code == 200) {
                        get()
                        close()

                        ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })
                    }
                })
                

            }else{
                banneredit(form.value).then((res: any) => {
                    if (res.code == 200) {
                        get()
                        close()

                        ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })
                    }
                })

            }
        }

    })

}
let get = () =>{
    store.dispatch("banner/getBannerListAction")
}
// 图片上传
let photo = ref()
const imageUrl = ref('')
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}
let changeInfo = (file: any) => {
    form.value.img = file.raw
}
// 正则验证
let rules = reactive<FormRules>({
    title: [{ required: true, message: "请输入商品价格", trigger: "blur" }]
   
})



let form = ref({
    title: "",//轮播图名称
    img: "",//图片(文件)
    status: "",//状态  1正常2禁用
    id:0
})

let lookup = (id:number) => {
    bannerinfo({id}).then((res:any)=>{
        console.log(res);
        form.value = res.list
        imageUrl.value = res.list.img
        form.value.id = id
        
    })
}
defineExpose({
    lookup
})
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>